<template>
  <!-- 平台管家弹框 -->
  <view class="custom-popup-overlay" v-if="show" @click="handleClosePopup">
    <view class="custom-popup-content" @click.stop>
      <!-- 背景图 -->
      <view class="dialog-bg-image"></view>

      <!-- 标题 -->
      <view class="dialog-title">平台管家</view>

      <!-- 二维码区域 -->
      <view class="qr-code-section">
        <view class="qr-code-container">
          <image 
            src="https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/qrcode.png" 
            mode="aspectFit" 
            class="qr-code-image"
          />
        </view>
      </view>

      <!-- 提示文字 -->
      <view class="instruction-text">
        <text class="scan-text">扫描上方二维码</text>
        <text class="add-text">添加平台管家微信</text>
      </view>

      <!-- 确认按钮 -->
      <view class="confirm-button" @click="handleClosePopup">
        <text class="confirm-text">我知道了</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
// import { hideButler, getButlerPopupState } from '@/sheep/hooks/useButler';

const show = ref(false);

// 监听全局事件
const handleButlerPopupChange = (isShow) => {
  console.log('管家弹窗状态变化:', isShow);
  show.value = isShow;
};

onMounted(() => {
  console.log('管家弹窗组件已挂载');
  // 初始化状态
  show.value = getButlerPopupState();
  console.log('初始状态:', show.value);
  // 监听事件
  uni.$on('butlerPopupChange', handleButlerPopupChange);
});

onUnmounted(() => {
  // 清理事件监听器
  uni.$off('butlerPopupChange', handleButlerPopupChange);
});

// 关闭管家弹窗
const handleClosePopup = () => {
  hideButler();
};
</script>

<style lang="scss" scoped>
.custom-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.custom-popup-content {
  width: 600rpx;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx;
  position: relative;
  overflow: hidden;
}

.dialog-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: -1;
}

.dialog-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  text-align: center;
  margin-bottom: 40rpx;
  position: relative;
  z-index: 1;
}

.qr-code-section {
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
}

.qr-code-container {
  width: 300rpx;
  height: 300rpx;
  background: #ffffff;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.qr-code-image {
  width: 250rpx;
  height: 250rpx;
}

.instruction-text {
  text-align: center;
  margin-bottom: 40rpx;
}

.scan-text {
  display: block;
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 10rpx;
}

.add-text {
  display: block;
  font-size: 24rpx;
  color: #999999;
}

.confirm-button {
  width: 100%;
  height: 80rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-text {
  color: #ffffff;
  font-size: 28rpx;
  font-weight: 500;
}
</style>
